<template>
  <div class="body">
    <div>
      <van-icon name="arrow-left" size="10vw" @click="checkReturn" />
    </div>
    <div class="bgimg">
      <!-- 标题 -->
      <span class="bt">用户注册</span>
      <!-- 用户名输入框 -->
      <div class="ctt">
        <div class="box">
          <van-icon class="img" name="friends-o" size="12vw" />
          <input
            @blur="checkUname"
            v-model="uname"
            id="uname"
            type="text"
            placeholder="昵称"
          />
        </div>
        <span id="uname_message" class="message">&nbsp;</span>
      </div>
      <!-- 邮箱输入框输入框 -->
      <div class="ctt">
        <div class="box">
          <van-icon class="img" name="envelop-o" size="12vw" />
          <input
            @blur="checkUemail"
            v-model="email"
            id="email"
            type="text"
            placeholder="邮箱"
          />
        </div>
        <span id="email_message" class="message"></span>
      </div>
      <!-- 密码输入框输入框 -->
      <div class="ctt">
        <div class="box">
          <img class="img" src="../../../assets/img/2.png" alt="" />
          <input
            @blur="checkUpwd"
            v-model="upwd"
            id="upwd"
            type="password"
            placeholder="密码"
          />
        </div>
        <span id="upwd_message" class="message"></span>
      </div>
      <div class="ctt">
        <!-- 确认密码输入框输入框 -->
        <div class="box">
          <img class="img" src="../../../assets/img/2.png" alt="" />
          <input
            @blur="checkUpwd2"
            v-model="upwd2"
            id="upwd2"
            type="password"
            placeholder="确认密码"
          />
        </div>
        <span id="upwd2_message" class="message"></span>
      </div>
      <!-- 注册按钮 -->
      <div @click="checkFrom" class="btn">用户注册</div>
      <span class="login" @click="checkLogin">已有用户,立即登录</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      email: "",
      upwd: "",
      upwd2: "",
    };
  },
  methods: {
    // 用户名验证
    checkUname() {
      let exp = /^.{2,10}$/;
      let name = this.uname.replace(/^\s+|\s+$/g, "");
      if (this.uname.trim() == "") {
        uname_message.innerHTML = "请输入2-10个字符用户名";
        uname_message.style.color = "red";
        return false;
      } else if (exp.test(name)) {
        uname_message.innerHTML = "用户名通过";
        uname_message.style.color = "green";
        return true;
      } else {
        uname_message.innerHTML = "请输入2-10个字符用户名";
        uname_message.style.color = "red";
        return false;
      }
    },
    // 邮箱格式验证
    checkUemail() {
      let exp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
      if (exp.test(this.email)) {
        email_message.innerHTML = "邮箱通过";
        email_message.style.color = "green";
        return true;
      } else {
        email_message.innerHTML = "请输入正确格式邮箱名";
        email_message.style.color = "red";
        return false;
      }
    },
    // 密码格式验证
    checkUpwd() {
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (exp.test(this.upwd)) {
        upwd_message.innerHTML = "密码通过";
        upwd_message.style.color = "green";
        return true;
      } else {
        upwd_message.innerHTML = "请输入由6-18字母开头数字组成";
        upwd_message.style.color = "red";
        return false;
      }
    },
    // 确认密码验证
    checkUpwd2() {
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (this.upwd2.length == 0) {
        upwd2_message.innerHTML = "确认密码不能为空";
        upwd2_message.style.color = "red";
        return false;
      } else if (!exp.test(this.upwd2)) {
        upwd2_message.innerHTML = "请输入由6-18字母开头数字组成";
        upwd2_message.style.color = "red";
        return false;
      } else if (this.upwd2 == this.upwd) {
        upwd2_message.innerHTML = "确认密码通过";
        upwd2_message.style.color = "green";
        return true;
      } else {
        upwd2_message.innerHTML = "两次密码输入不一致";
        upwd2_message.style.color = "red";
        return false;
      }
    },
    // 注册按钮验证
    checkFrom() {
      if (
        this.checkUname() &&
        this.checkUemail() &&
        this.checkUpwd() &&
        this.checkUpwd2()
      ) {
        let params = `uname=${this.uname}&email=${this.email}&upwd=${this.upwd}`;
        // console.log(params);
        this.axios.post("/register", params).then((res) => {
          // console.log('注册',res);
          if (res.data.code == 200) {
            this.$router.push("/login");
          } else if(res.data.code == 201){
            this.$messagebox("注册失败", "邮箱已存在");
          }
        });
      } else {
        this.$messagebox("注册失败", "请重新注册");
      }
    },
    // 最下方文字跳转
    checkLogin() {
      this.$router.push("/login");
    },
    // 返回按钮跳转
    checkReturn() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  width: 100vw;
  height: 100vh;
  background-image: url(@/assets/img/bj.jpg);
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
}
::v-deep .mint-msgbox-confirm {
  color: black;
}
</style>
<style scoped src="@/assets/CSS/login.css">
</style>